import React from 'react';
import styled from 'styled-components';

import farmer from '../../assets/image/logo@2x.png';

const Logo: React.FC = () => {
  return (
    <StyledLogo>
      <StyledTopBarpc>
        <img src={farmer} height="60" style={{ marginTop: 10 }} />
      </StyledTopBarpc>
      <StyledTopBarh5>
      <img src={farmer} height="40" style={{ marginTop: 5 }} />
      </StyledTopBarh5>
      
    </StyledLogo>
  );
};


const StyledTopBarpc = styled.div`
display: block;
@media (max-width: 768px) {
  display: none;
};
`

const StyledTopBarh5 = styled.div`
display: none;
@media (max-width: 768px) {
  display: block;
};
`;

const StyledLogo = styled.div`
  align-items: center;
  display: flex;
`;

const StyledLink = styled.a`
  color: ${(props) => props.theme.color.grey[100]};
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  margin-left: ${(props) => props.theme.spacing[2]}px;
`;

export default Logo;
